import { Form, InputNumber, Space } from "antd"
import lessModule from "./index.module.less"
import { FormInstance } from "antd/lib"
import { useEffect } from "react"
import { $eventBus, $EventBus_on } from "../../../../common/utils"

// 主页-调试测试页面-便携设备接入页面-通道系数组件
interface homePageChannelCoefficientComponentInterface {
    change_formData: Function
}
const HomePage_ChannelCoefficientComponent: React.FC<homePageChannelCoefficientComponentInterface> = (props) => {
    const [form] = Form.useForm()
    const formItemList = ["k", "b"]

     // 广播函数数据
     const eventBusFuncData = { 
        // 提交操作
submitOperation: (data) => {
            form.validateFields().then((data) => {
                props.change_formData(data)

            })
        }
     }
    useEffect(() => {
        $EventBus_on(eventBusFuncData)
        return () => {
            $EventBus_on(eventBusFuncData)
        }
    }, [])
    return (
        <div className={lessModule["homePageChannelCoefficientComponent"]}>
            <header className={lessModule["homePageChannelCoefficientComponent-header"]}>主变通道系数</header>
            <main className={lessModule["homePageChannelCoefficientComponent-main"]}>
                <Form
                    className={lessModule["homePageChannelCoefficientComponent-main__form"]}
                    form={form}>

                    {
                        Array.from({ length: 16 }, (_, i) => i + 1).map((item, idx) => (
                            <div key={`formItem${idx}`} className={lessModule["main-form__group"]}>
                                <div className={lessModule["form-group__label"]} >通道{item}</div>
                                <div className={lessModule["form-group__formItem"]}>
                                    {
                                        formItemList.map((formItem, idx,) => (
                                            <Form.Item key={`formItemItem${idx}`} className={lessModule["group-formItem__item"]} >
                                                <div className={lessModule["formItem-item__row"]} >

                                                    <Form.Item
                                                        className={lessModule["group-formItem__item"]}
                                                        label={formItem}
                                                        name={[item, formItem]}
                                                        required={false}
                                                        rules={[{ required: true, message: "请输入" }]}>
                                                        <InputNumber placeholder="请输入" precision={2} step="0.01" autoComplete="off" />
                                                    </Form.Item>
                                                </div>
                                            </Form.Item>
                                        ))
                                    }
                                </div>
                            </div>
                        ))
                    }

                </Form>
            </main>
        </div>
    )
}
export default HomePage_ChannelCoefficientComponent